<template>
  <view class="fan">
    <!-- <uv-navbar bgColor="transparent" title="我的粉丝" @leftClick="back">
    </uv-navbar> -->
    <view class="total">
      <uv-text size="14" color="#999999" text="我的粉丝数"></uv-text>
      <uv-text
        size="18"
        color="#FFFFFF"
        :text="total < 0 ? '-' : total"
      ></uv-text>
    </view>
    <view class="lists">
      <view class="top">
        <uv-text size="12" color="#999999" text="用户"></uv-text>
        <uv-text
          size="12"
          color="#999999"
          text="关注时间"
          class="time"
        ></uv-text>
        <uv-text
          size="12"
          color="#999999"
          text="产生收益"
          align="right"
        ></uv-text>
      </view>
      <view class="empty" v-if="list.length === 0">
        <uv-empty
          text="暂时还未获得粉丝哦"
          marginTop="100"
          mode="data"
          width="160rpx"
          height="160rpx"
          icon="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/empty/null_fans1.png"
        ></uv-empty>
      </view>
      <view v-else>
        <view
          class="list"
          v-for="(item, index) in list"
          :key="item.id"
          @click="toChat(item.id)"
        >
          <uv-avatar size="44" :src="item.fans.profile_photo"></uv-avatar>
          <view class="mid">
            <uv-text
              size="14"
              color="#333333"
              mode="phone"
              format="encrypt"
              :text="item.fans.phone"
              class="pdb"
            ></uv-text>
            <uv-text
              size="12"
              color="#999999"
              :text="item.create_time"
            ></uv-text>
          </view>
          <uv-text
            size="16"
            color="#333333"
            :text="'￥' + item.commission"
            align="right"
          ></uv-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { interpreter } from "@/api/request";
import { fanList } from "@/api/chat";
import { onMounted, ref } from "vue";

interface List {
  id: any; //Number as () => any
  fans: {
    profile_photo: String;
    phone: String;
  };
  create_time: String;
  commission: String;
}
const list = ref<List[]>([]);
const total = ref(0);

function back() {
  uni.navigateBack({ delta: 1 });
}

async function getList() {
  const [err, res] = await interpreter(fanList());
  if (!err) {
    list.value = res.data;
    total.value = res.total;
  }
}

onMounted(() => {
  getList();
});
const toChat = () => {};
</script>

<style lang="scss" scoped>
.fan {
  height: 100vh;
  background-color: #e4e4e4;
  padding-top: 40rpx;

  .uv-navbar {
    height: 44px;
  }

  .total {
    height: 180rpx;
    width: 670rpx;
    padding: 20px 20px 0;
    background-color: #333333;
    border-radius: 40rpx 40rpx 0 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .lists {
    height: calc(100vh - 174px);
    overflow-y: scroll;
    padding: 20px;
    border-radius: 10px 10px 0 0;
    background-color: #f9f9f9;

    .top {
      padding: 0 10px 5px;
      display: flex;
      justify-content: center;

      .time {
        flex: 3;
      }
    }

    .list {
      height: 60px;
      display: flex;
      align-items: center;
      margin: 10px 0;
      padding: 0 10px;
      background-color: #fff;
      border-radius: 10px;

      .mid {
        margin-left: 16px;

        .pdb {
          padding-bottom: 4px;
        }
      }
    }
  }
}
</style>
